<template>
  <div>
    <UserDialog :dialog="state.isShowDialog"></UserDialog>
    <el-input
      v-model="state.modelValue"
      :value="state.val"
      :placeholder="placeholder"
      readonly
    >
      <template #append>
        <el-button @click="userSerach()"
          ><el-icon> <elementUser /> </el-icon
        ></el-button>
      </template>
    </el-input>

    <div>
      <el-dialog v-model="state.dialog" title="选择用户" width="70%">
        <el-container style="min-height: 450px">
          <el-aside width="200px">
            <el-input
              placeholder="请输入关键字过滤"
              clearable
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
              v-model="state.keyword"
              @input="filter()"
            />
            <el-tree
              :data="state.treeData.data"
              :props="defaultProps"
              @node-click="onClickNode"
              default-expand-all
              node-key="id"
            />
          </el-aside>
          <el-container>
            <el-header class="selector-header">
              <el-input
                v-model="state.where.keyValue"
                class="mr10"
                placeholder="请输入用户真实姓名"
                prefix-icon="el-icon-search"
                style="max-width: 180px"
              ></el-input>
              <el-button type="primary" class="ml10" @click="onSearch()">
                <el-icon>
                  <elementSearch />
                </el-icon>
                查询
              </el-button>
              <el-button @click="onReset()">
                <el-icon>
                  <elementRefreshRight />
                </el-icon>
                重置</el-button
              >
            </el-header>
            <el-main>
              <wg-table
                ref="tableRef"
                :selection="true"
                :border="true"
                url="/api/system/user/getPageList"
                :columns="state.columns"
                :where="state.where"
                @selection-change="handleSelectionChange"
              ></wg-table>
            </el-main>
          </el-container>
        </el-container>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="onCancel">取 消</el-button>
            <el-button type="primary" @click="onSubmit()" 
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { stat, watch } from "fs";
import {
  ref,
  toRefs,
  reactive,
  onMounted,
  defineProps,
  getCurrentInstance,
  defineExpose,
  withCtx,
} from "vue";

import { getOrganizationalList } from "/@/api/org/index";
import { getuserRelationData } from "/@/api/userRelation/index";
const { proxy }: any = getCurrentInstance();
const tableRef = ref();
const props = defineProps({
  modelValue: String,
  placeholder: {
    type: String,
    default: "请输入",
  },
  dialog: {
    type: Boolean,
    default: false,
  },
});
const defaultProps = {
  children: "children",
  label: "text",
};
const state: any = reactive({
  isShowDialog: false,
  modelValue: "",
  columns: [
    { type: "index", label: "序号", width: 80 },
    { prop: "userName", label: "用户名", sortable: true },
    { prop: "realName", label: "真实姓名", sortable: true },

    {
      prop: "mobilePhone",
      label: "手机号",
      width: 150,
    },
    {
      prop: "enableMark",
      label: "有效",
      sortable: true,
      dictionaryCode: "enable",
    },
  ],
  where: {
    keyValue: "",
  },
  treeData: {
    data: [],
  },
  dialog: false,
  keyword: "",
  val: [],
  rowVal: [],
  userId: [],
});
//初始化组织架构数据
const initStructureData = () => {
  const query = {};
  query["queryJson"] = JSON.stringify({ keyValue: state.keyword });
  getOrganizationalList(query).then((res) => {
    state.treeData.data = res.data;

  });
};
//查询
const onSearch = () => {
  tableRef.value.load();
};
//重置
const onReset = () => {
  state.where.keyValue = "";
  tableRef.value.load();
};
//取消
const onCancel = () => {
  state.dialog = false;
};
//过滤
const filter = () => {
  initStructureData();
};
const handleSelectionChange = (rowVal) => {
  state.rowVal = [];
  state.userId = [];
  rowVal.forEach((realNameList) => {
    state.rowVal.push(realNameList.realName);
    state.userId.push(realNameList.userId);
  });
};
//确定
const onSubmit = () => {
  state.dialog = false;

  state.val = state.rowVal;

  for (let index = 0; index < state.userId.length; index++) {
    if (state.userId.length == 1) {
      state.modelValue = state.userId[0];
    } else {
      state.modelValue = state.userId;
    }
  }

  //  state.modelValue = state.userId;
};

//查询userRelationData数据
const initUserRelatioinData = () => {
  getuserRelationData().then((res) => {});
};
//点击数节点
const onClickNode = (treeMo) => {};

//页面加载
onMounted(() => {
  initStructureData();
});
//点击跳转diolag
const userSerach = () => {
  state.dialog = true;
};
</script>
<style scoped>
.selector-header {
  --el-header-height: 35px;
}
</style>